<template>
  <!-- 赛事列表 所有赛事 -->
  <div class="allMatch">
    <!-- 筛选表单 -->
    <el-form :inline="true" :model="searchForm" class="searchWrap">
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="输入名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.type" placeholder="类型" class="iptWa">
          <el-option v-for="(v,i) in allType" :key="i" :label="v.name" :value="v.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.state" placeholder="状态" class="iptWa">
          <el-option label="进行中" value="进行中"></el-option>
          <el-option label="未开始" value="未开始"></el-option>
          <el-option label="已结束" value="已结束"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.startDate"
          value-format="yyyy/MM/dd"
          format="yyyy/MM/dd"
          type="date"
          placeholder="开始日期"
          class="iptWb"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.endDate"
          value-format="yyyy/MM/dd"
          format="yyyy/MM/dd"
          type="date"
          placeholder="结束日期"
          class="iptWb"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="getMA_arr">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" @click="reset">重置条件</el-button>
      </el-form-item>
      <!-- <el-form-item class="you">
        <el-button size="medium">列表模式</el-button>
      </el-form-item>-->
      <el-form-item class="you">
        <el-button type="primary" icon="el-icon-plus" size="medium" @click="addNewMA()">新增赛事/活动</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="18" class="mlist" v-loading="loading">
      <template v-if="history.length>0">
        <el-alert title="最近查看" type="info" class="stit a" close-text="清空记录" @close="delHis"></el-alert>
        <el-col :md="6" :sm="8" :xs="12" class="mWrap" v-for="(v,i) in history" :key="'a'+i">
          <div class="mBox" @click="see(v.id,v.mold,v)">
            <p class="tit nob">{{v.name}}</p>
            <!-- <div class="msgB">
              <img class="logo" :src="v.logo" alt />
              <div class="msg">
                <p>类型：{{v.type}}</p>
                <p v-if="v.place">地点：{{v.place}}</p>
                <p>时间：{{v.matchDate}}</p>
              </div>
            </div>
            <div class="btnb">
              <p class="btn" @click="see(v.id,v.mold,v)">查看</p>
            </div>-->
          </div>
        </el-col>
      </template>
      <template v-if="hasBegin.length>0">
        <el-alert title="进行中" type="success" :closable="false" class="stit b"></el-alert>
        <el-col :md="8" :sm="12" :xs="12" class="mWrap" v-for="(v,i) in hasBegin" :key="'b'+i">
          <div class="mBox">
            <p class="tit">{{v.name}}</p>
            <div class="msgB">
              <img class="logo" :src="v.logo" alt />
              <div class="msg">
                <p>类型：{{v.type}}</p>
                <p v-if="v.place">地点：{{v.place}}</p>
                <p>时间：{{v.matchDate}}</p>
                <!-- 至 {{v.matchEndDate}} -->
              </div>
            </div>
            <div class="btnb">
              <p class="btn" @click="see(v.id,v.mold,v)">查看</p>
              <!-- <p class="btn">删除</p> -->
            </div>
          </div>
        </el-col>
      </template>
      <template v-if="willBegin.length>0">
        <el-alert title="即将开始" type="warning" :closable="false" class="stit c"></el-alert>
        <el-col :md="8" :sm="12" :xs="12" class="mWrap" v-for="(v,i) in willBegin" :key="'c'+i">
          <div class="mBox">
            <p class="tit">{{v.name}}</p>
            <div class="msgB">
              <img class="logo" :src="v.logo" alt />
              <div class="msg">
                <p>类型：{{v.type}}</p>
                <p v-if="v.place">地点：{{v.place}}</p>
                <p>时间：{{v.matchDate}}</p>
                <!-- 至 {{v.matchEndDate}} -->
              </div>
            </div>
            <div class="btnb">
              <p class="btn" @click="see(v.id,v.mold,v)">查看</p>
              <!-- <p class="btn">删除</p> -->
            </div>
          </div>
        </el-col>
      </template>
      <template v-if="hasEnd.length>0">
        <el-alert title="已结束" type="info" :closable="false" class="stit d"></el-alert>
        <el-col :md="8" :sm="12" :xs="12" class="mWrap" v-for="(v,i) in hasEnd" :key="'d'+i">
          <div class="mBox">
            <p class="tit">{{v.name}}</p>
            <div class="msgB">
              <img class="logo" :src="v.logo" alt />
              <div class="msg">
                <p>类型：{{v.type}}</p>
                <p v-if="v.place">地点：{{v.place}}</p>
                <p>时间：{{v.matchDate}}</p>
                <!-- 至 {{v.matchEndDate}} -->
              </div>
            </div>
            <div class="btnb">
              <p class="btn" @click="see(v.id,v.mold,v)">查看</p>
              <!-- <p class="btn">删除</p> -->
            </div>
          </div>
        </el-col>
      </template>
      <!-- <div v-else class="no_tips">暂无赛事/活动 快去发布吧</div> -->
    </el-row>
    <el-dialog title="赛事活动基础信息" width="70%" :visible.sync="showAE" :close-on-click-modal="false">
      <el-radio-group v-model="MoA" style="margin-bottom: 30px;" @change="cMold">
        <el-radio-button label="match">线下赛</el-radio-button>
        <el-radio-button label="act">活动</el-radio-button>
      </el-radio-group>
      <aeMoA :mold="MoA" :AEShow.sync="showAE" :key="timer" :typeArr="typeArr" />
    </el-dialog>
  </div>
</template>

<script>
import aeMoA from "../../../components/ae_MoA/ae_MoA";
var allType = [];
export default {
  components: { aeMoA },
  data() {
    return {
      showAE: false,
      MoA: "match",
      searchForm: {
        name: "",
        type: "",
        state: "",
        startDate: "",
        endDate: "",
      },
      timer: 1,
      typeArr: {},
      listArr: [],
      loading: false,
      allType: [],
      history: [],
      hasBegin: [],
      willBegin: [],
      hasEnd: [],
    };
  },
  methods: {
    // 新增赛事/活动 判断身份是否可以发赛事
    addNewMA() {
      // if(this.$orgId!=1){
      this.$axios.get("/sbr/getOrgId?orgId=" + this.$orgId).then((res) => {
        let rr = res.data.data;
        if (rr&&rr==1) {
          this.MoA = "match";
          this.timer = new Date().getTime();
          this.showAE = true;
        }
      });
      // }
    },
    // 重置
    reset() {
      this.searchForm = JSON.parse(
        JSON.stringify({
          name: "",
          type: "",
          state: "",
          startDate: "",
          endDate: "",
        })
      );
      this.getMA_arr();
    },
    // 清空历史记录
    delHis() {
      this.$confirm("确认清空历史记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("historyArr");
          this.history = [];
          this.$message({
            type: "success",
            message: "清空成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 查看赛事
    see(id, mold, row) {
      let his = localStorage.getItem("historyArr");
      delete row.signUpIntroduce;
      delete row.disclaimer;
      if (his) {
        his = JSON.parse(this.$Base64.decode(his));
        let i = his.findIndex((v) => {
          return v.id == id;
        });
        if (i >= 0) {
          his.splice(i, 1);
        }
        // console.log(his);
      } else his = [];
      his.unshift(row);
      // console.log(his);
      his = JSON.stringify(his);
      his = this.$Base64.encode(his);
      localStorage.setItem("historyArr", his);
      let q = this.$Base64.encode(id);
      sessionStorage.setItem("mold", this.$Base64.encode(mold)); // 类型 赛事 活动
      sessionStorage.setItem("MandA", q);
      this.$router.push({ path: "/match/matchMsg" });
    },
    // 获取类型
    getType() {
      this.$axios.get("/sbr/match/getMatchTypeList").then((res) => {
        let rr = res.data.data;
        allType = rr;
        this.allType = rr;
        this.cMold();
      });
    },
    cMold() {
      this.timer = new Date().getTime();
      if (this.MoA == "match") {
        this.typeArr = allType.filter((v) => {
          return v.state == "S";
        });
      } else {
        this.typeArr = allType.filter((v) => {
          return v.state == "H";
        });
      }
    },
    // 获取赛事 搜索
    getMA_arr() {
      this.loading = true;
      this.listArr = [];
      this.hasBegin = [];
      this.willBegin = [];
      this.hasEnd = [];
      // this.searchForm.orgId=
      let oo = this.$Base64.encode("orgId=" + this.$orgId);
      oo = this.$Base64.encode(oo);
      this.$axios
        .get("/sbr/match/getMatchByOrg/" + oo, { params: this.searchForm })
        .then((res) => {
          let rr = res.data.data;
          // this.listArr = rr;
          this.hasBegin = rr["进行中"] ? rr["进行中"] : [];
          this.willBegin = rr["未开始"] ? rr["未开始"] : [];
          this.hasEnd = rr["已结束"] ? rr["已结束"] : [];
          this.loading = false;
        });
    },
  },
  created() {
    this.getType();
    this.getMA_arr();
    let his = localStorage.getItem("historyArr");
    if (his) {
      his = JSON.parse(this.$Base64.decode(his));
      if (this.$orgId == 1) this.history = his;
      else
        this.history = his.filter((v) => {
          return v.orgId == this.$orgId;
        });
    }
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.no_tips {
  text-align: center;
  margin-top: 30px;
}
.allMatch {
  width: calc(100% - 48px);
  padding: 16px 24px;
  overflow: hidden;
}
.searchWrap {
  width: calc(100% - 20px);
  background-color: #fff;
  padding: 10px 10px 0px 10px;
  border-radius: 10px;
  overflow: hidden;
}
.iptWa {
  width: 150px;
}
.iptWb {
  width: 160px;
}
.you {
  float: right;
}
.mlist {
  margin-top: 15px;
  padding: 0 10px;
  min-height: 100px;
}
.mWrap {
  margin-bottom: 15px;
}
.mBox {
  background-color: #fff;
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}
.tit {
  font-size: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tit.nob {
  margin-bottom: 0px;
  cursor: pointer;
}
.msgB {
  overflow: hidden;
}
.logo {
  width: 100px;
  height: 100px;
  float: left;
}
.msg {
  width: calc(100% - 108px);
  float: left;
  height: 100px;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 16px;
}
.btnb {
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
}
.btn {
  /* width: calc(47% - 2px); */
  width: calc(100% - 2px);
  /* margin-left: 2%; */
  float: left;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
}
/* .el-dialog__wrapper {
  display: flex;
  align-items: center;
} */
.el-dialog__wrapper >>> .el-dialog {
  margin: 20px auto !important;
  max-width: 638px;
  min-width: 350px;
  /* top: 50%;
    left: 50%;
    transform: translate(-63%,-36%); */
}
.stit {
  margin-bottom: 15px;
  line-height: 25px;
  color: #fff;
}
.stit >>> .el-alert__title {
  font-size: 17px;
}
.stit.a {
  /* background-color: #49b8e9; */
  color: #00b1ff;
  background-color: rgb(73 184 233 / 30%);
}
.stit.b {
  background-color: #3ed07b3d;
  color: #3ed07c;
}
.stit.c {
  background-color: #6f7dec45;
  color: #6f7dec;
}
.stit.d {
  background-color: #ffad2944;
  color: #ffad29;
}
.stit >>> .el-alert__closebtn {
  /* color: #fff; */
  color: #000;
  top: 8px;
}
</style>